  import { ref,onBeforeUnmount,onMounted, Ref ,nextTick } from 'vue'
import VueHeaderXMain from '~/components/headerX/VueHeaderXMain';
import DeviceUtil from '~/utils/DeviceUtil';
import MathUtil from '~/utils/MathUtil';
import System from '~/utils/System';

export default class VueProcessMain {

    static that:VueProcessMain

    run:boolean = false;

    dialogVisible:Ref<boolean> = ref(false)

    public insertArr:Ref<ListItem[]> = ref([
        // {
        //     id:"stopId1",
        //     width:"134",
        //     height:"134",
        //     top:"376",
        //     left:"705",
        //     status:"stop",
        // }
    ])

    constructor(){

        VueProcessMain.that = this

        onMounted(()=>{
            this.addStop({
                type:"img",
                id:"stopId1",
                width:"134",
                height:"134",
                x:"705",
                y:"376",
                status:"stop",
            })

            this.addStop({
                type:"ani",
                id:"ani1",
                width:"1670",
                height:"1010",
                x:"0",
                y:"0",
                aniArr:["A1.png","A2.png","A3.png","A4.png"],
                aniTime:"800",
            })


            this.run = true
            this.getData()
        })


        onBeforeUnmount(()=>{
            this.run = false
        });
    }

    fullScreen(){
        VueHeaderXMain.that.collapseMenu()
    }

    /**
     *  获取数据渲染
     */
    getData(){
        this.addStop({
            type:"txt",
            id:"stopId4",
            width:"112",
            height:"50",
            x:"1080",
            y:"490",
            str:MathUtil.getRandomInt(1000,1000000)+'',
            font:"宋体",
            fontSize:"14",
            color:"#FFF000",
            unit:"m3/h",
        })

        this.addStop({
            type:"txt",
            id:"stopId5",
            width:"74",
            height:"22",
            x:"216",
            y:"149",
            str:MathUtil.getRandomInt(0,20)+'',
            font:"微软雅黑",
            color:"rgb(255 0 0)",
            fontSize:"16",
            unit:"℃",
        })

        this.addStop({
            type:"txt",
            id:"stopId6",
            width:"74",
            height:"22",
            x:"216",
            y:"189",
            str:MathUtil.getRandomInt(0,20)+'',
            font:"微软雅黑",
            color:"rgb(255 0 0)",
            fontSize:"16",
            unit:"℃",
        })

        this.addStop({
            type:"txt",
            id:"stopId7",
            width:"74",
            height:"22",
            x:"441",
            y:"190",
            str:MathUtil.getRandomInt(0,20)+'',
            font:"微软雅黑",
            color:"rgb(255 0 0)",
            fontSize:"16",
            unit:"℃",
        })

        this.addStop({
            type:"txt",
            id:"stopId8",
            width:"74",
            height:"22",
            x:"441",
            y:"149",
            str:MathUtil.getRandomInt(0,20)+'',
            font:"微软雅黑",
            color:"rgb(255 0 0)",
            fontSize:"16",
            unit:"℃",
        })

        setTimeout(() => {
            if(this.run)
                this.getData()
        }, 500);
    }

    /**
     *  添加渲染设备
     */
    addStop(info:ListItem){

        let valueListT = VueProcessMain.that.insertArr.value

        for (let i = 0; i < valueListT.length; i++) {
            const vl:ListItem = valueListT[i];
            if(vl.id == info.id){
                VueProcessMain.that.insertArr.value.splice(i,1)
                break
            }
        }
        
        VueProcessMain.that.insertArr.value.push(info)

    }

    /**
     *
     *  按钮点击事件
     */
    btnClick(id:string){
        console.log(id);
        VueProcessMain.that.dialogVisible.value = true
        DeviceUtil.setBoay()
    }

}


export interface ListItem {

  //img-RECT(385,504,447,547)
  type: string;
  id: string;
  width: string;
  height: string;
  x: string;
  y: string;
  status?: string;


  //txt-RECT(1024,277,1124,307),RGB(242,0,0),20,[微软雅黑],[m3/h]
  color?:string;
  font?:string;
  fontSize?:string;
  /**
   *单位
   */
  unit?:string;
  str?:string;

  //动画-RECT(385,504,447,547) 2s -["1.jpg","2.jpg"...]
  aniArr?:Array<string>;//播放列表
  aniTime?:string;//播放时间

}
